<template>
    <div>
        <h2>业务管理</h2>
        <el-button type="primary" @click="NewWork">新建业务</el-button>
        <el-dialog title="新建业务" :visible.sync="workDialog">
            <div>
                <span>业务名：</span>
                <el-input
                    v-model="formInfo.formName"
                    placeholder="请输入业务名"
                    style="width: 80%"
                ></el-input>
            </div><br/>
            <div v-for="(item, index) in questionArray" :key="(item, index)">
                <div v-if="item.questionType==0">
                    <div>
                        <span>业务描述{{index+1}}：</span>
                        <el-input
                            v-model="item.formName"
                            placeholder="请输入业务描述"
                            style="width: 70%"
                        ></el-input>&nbsp;
                        <el-checkbox v-model="item.must">是否必填</el-checkbox>
                    </div>
                </div><br/>
            </div>
            <div>
            <el-link :underline="false" @click="AddBlank">+增加填空型</el-link>
            </div>
            <br/>
            <el-button size="small" @click="PublishWork">发布业务表单</el-button>
        </el-dialog>
    </div>
</template>

<script>
//可以根据权限能力查询可见的业务表单列表
//可以新建一个业务表单,尽量是可以选择下属部门进行表单归属权确定，这决定了该表单归属的部门
import { nanoid } from "nanoid"; //生成id的接口
import { publishWork } from "@/api/bussiness";
import { getUserInfo } from "@/utils/auth"; //引入用户信息cookie


export default {
    data() {
        return {
            workDialog: false, //新建业务表单的对话框
            formInfo: {
                id: undefined,
                userId: undefined,
                formName: undefined,
                formInfo: undefined,
                counts: 0,
                formStatus: 1,
                createTime: undefined,
                departmentId: undefined,
            },
            questionArray:[]
        };
    },
    methods: {
        //新建业务表单
        NewWork() {
            this.formInfo.id=nanoid();
            this.workDialog = true;
        },
        //发布业务表单
        PublishWork(){
            // console.log(getUserInfo());获取user部门、角色、权限的方法
            // console.log(this.$store.state.user);//获取user信息的方法
            this.formInfo.status=1;//修改状态为发布
            this.formInfo.departmentId="1";//实际上这里是应选择部门id，由于部门列表接口还未实现，先这样将就
            //打包数据
            var params = {
                formInfo:this.formInfo,
                questionArray:this.questionArray
            };
            //调用接口，新建表单
            publishWork(params)
                .then((response) => {
                    console.log(response);
                    this.$message({
                        message: "新建业务表单成功",
                        type: "success",
                    });
                    //初始化数据，收尾
                    this.formInfo={
                        id: undefined,
                        userId: undefined,
                        formName: undefined,
                        formInfo: undefined,
                        counts: 0,
                        formStatus: 1,
                        createTime: undefined,
                        departmentId: undefined,
                    };
                    this.questionArray=[];
                    this.workDialog = false;
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //增加填空题
        AddBlank() {
            var blank = {
                id: nanoid(),
                formId: this.formInfo.id,
                orderId: this.formInfo.counts + 1,
                must: undefined,
                questionName: undefined,
                questionType: 0,
                questionInfo: undefined,
            };
            this.questionArray.push(blank);
        },
    },
};
</script>